<template>
  <div>
    <div class="info">
      <span>代理功勋赛门票：皇冠X{{num}}</span>
      <span>皇冠数量：{{crown}}</span>
    </div>
    <div class="exchange_box">
      <div class="exchange_info">
        <div class="player-id">
          <label for="player-id">玩家ID：</label>
          <input id="player-id" type="number" v-model="playerId" placeholder="为此玩家兑换">
        </div>
        <div>
          <label for="exchange_number">兑换数量：</label>
          <input id="exchange_number" type="number" v-model="exchangenum" placeholder="兑换门票的数量">
        </div>
      </div>
      <agent-button @btnClick="sureClick">确认兑换</agent-button>
    </div>
    <table-view-with-title title="兑换记录" :titles="titles" :dataSource="lists" @next="nextClick" @previous="previousClick" :currentPage="currentPage" :maxPage="maxPage"></table-view-with-title>
  </div>
</template>
<script>
import TableViewWithTitle from "../../components/common/TableViewWithTitle.vue";
import AgentButton from "../../components/common/AgentButton.vue";
export default {
  data() {
    return {
      num: 5,
      crown: 0,
      playerId: "",
      exchangenum: "",
      titles: [
        {
          key: "gameuserid",
          value: "玩家ID"
        },
        {
          key: "itemname",
          value: "物品"
        },
        {
          key: "exchangenum",
          value: "数量"
        },
        {
          key: "exchangetime",
          value: "兑换时间"
        },
        {
          key: "exchangestatus",
          value: "状态"
        }
      ],
      lists: [],
      currentPage: 1,
      maxPage: 1
    };
  },
  components: {
    TableViewWithTitle,
    AgentButton
  },
  created() {
    this.apiService.user.exchangetickets().then(res => {
      this.crown = res.data.crown;
      this.num = res.data.exchangecrown.exploit_exchange_num;
    });
    this.fetchLists();
  },
  methods: {
    sureClick() {
      let _this = this;
      this.apiService.user
        .getplayerinfo({
          playerid: this.playerId
        })
        .then(res => {
          this.$vux.confirm.show({
            title: "兑换门票",
            content: `确定为${res.data.nick}兑换${this.exchangenum}张门票么?`,
            onConfirm() {
              _this.apiService.user
                .confrimexchangetickets({
                  playerid: _this.playerId,
                  exchangenum: _this.exchangenum,
                  exchangename: "代理功勋赛门票",
                  exchangetype: "exploit"
                })
                .then(res => {
                  _this.$vux.toast.text("兑换成功");
                  _this.fetchLists();
                });
            }
          });
        })
        .catch(error => {});
    },
    fetchLists() {
      this.apiService.user
        .exchangeticketslist({
          pagesize: 10,
          currentpage: this.currentPage
        })
        .then(res => {
          this.maxPage = Math.ceil(res.data.total / 10);
          this.lists = res.data.exchangeticketslist;
          this.lists.map(item => {
            item.exchangetime = new Date(
              item.exchangetime * 1000
            ).toLocaleDateString();
            item.exchangenum = item.exchangenum + "张";
            item.exchangestatus =
              item.exchangestatus == 1 ? "已完成" : "未完成";
          });
        });
    },
    nextClick() {
      this.currentPage += 1;
      this.fetchLists();
    },
    previousClick() {
      this.currentPage -= 1;
      this.fetchLists();
    }
  }
};
</script>
<style scoped>
.info {
  color: #fdb162;
  font-size: 0.32rem;
  padding: 0.15rem 0;
  display: flex;
  justify-content: space-around;
}
.exchange_box {
  background-color: #fff;
  padding-bottom: 0.35rem;
  text-align: center;
}
.exchange_info {
  font-size: 0.32rem;
  padding: 1rem 0;
}
.exchange_info div {
  margin: 0.2rem 0;
}
.exchange_info label {
  display: inline-block;
  width: 2rem;
  text-align: right;
}
.exchange_info input {
  border: 1px solid #d7d7d7;
  border-radius: 0.1rem;
  padding: 0.1rem;
  font-size: 0.32rem;
}
</style>


